<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/warpper.css">
    <link rel="stylesheet" href="./css/header_footer.css">
    <link rel="stylesheet" href="./css/clothing_tem.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/index2.css">
    <script src="./lib/jquery.js"></script>
    <!-- 导航栏左侧 -->
    <script>
        $(function(){
            $("#banner .category li").mouseenter(function(){
                $(this).find("p").addClass("active_p").next().addClass("active_div")
            })
            $("#banner .category li").mouseleave(function(){
                $(this).find("p").removeClass("active_p").next().removeClass("active_div")
            })

        })
    </script>
</head>
<body>
    <!-- 顶部区域开始 -->
    <div class="top1">
        <div class="warpper clearfix">
            <p class="fl">legochina.cn</p>
            <span class="fr">
                欢迎光临
                <a href="#">乐购</a>,
                请 登陆\
                <a href="#">注册</a>
            </span>
        </div>
    </div>
    <!-- 顶部区域结束 -->

    <!-- 头部区域开始 -->
    <div class="header warpper clearfix">
        <div class="fl">
            <img src="./imgs/logo.jpg" alt="">
        </div>
        <div class="fr">
            <form action="#" class="clearfix">
                <input type="text">
                <input type="button" class="input2">
                <a href="" class="_a1 fl">
                    <span></span>
                    购物车&nbsp;3
                </a>
                <a href="" class="_a2 fl">我的订单</a>
            </form>
            
        </div>
        <ul class="fr clearfix">
            <li>图书</li>
            <li>电子书</li>
            <li>原创文学</li>
            <li>服装</li>
            <li>运动户外</li>
            <li>孕婴童</li>
            <li>家居</li>
            <li>创意文具</li>
            <li>地方特产</li>
            <li>海外购</li>
            <li>电器城</li>
        </ul>
    </div>
    <!-- 头部区域结束 -->

    <!-- 海报区域 -->
    <div id="banner" class="warpper clearfix">
        <!-- 分类菜单 -->
        <ul class="category fl">
            <!-- <li>
                <p>图书、电子书、童书</p>
                <div>
                    <ul>
                        <li>
                            <a href="">图书馆>></a>
                            <a href="">图书馆>></a>
                            <a href="">图书馆>></a>
                        </li>
                        <li>
                            <h5>文艺</h5>
                            <p>小说   文学   传记   青春   动漫   艺术   摄影   明星</p>
                        </li>
                    </ul>
                </div>
            </li>  -->
           
            <script>
                let arr_p=[
                    "图书、电子书、童书",
                    "创意文具",
                    "服饰、内衣",
                    "鞋靴、箱包",
                    "运动户外",
                    "孕、婴、童",
                    "家居、家纺、汽车",
                    "家具、家装、康体",
                    "美妆、个人护理、成人",
                    "食品、茶酒、生鲜",
                    "腕表、珠宝、眼镜",
                    "手机、数码",
                    "电脑办公",
                    "家用电器"
                ]
            let arr_div=[
                "box1",
                "box2",
                "box3",
                "box4",
                "box5",
                "box6",
                "box7",
                "box8",
                "box9",
                "box10",
                "box11",
                "box12",
                "box13",
                "box14"
            ]
            for(let i=0;i<14;i++){
                document.write(
                    `<li>
                <p>${arr_p[i]}</p>
                <div>${arr_div[i]}</div>
                </li> `
                )
            }
            </script>
        </ul>
        <!--轮播开始-->
        <div class="pptbox" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
            <li>
                <img src="imgs/banner1.jpg" />
            </li>
            <li>
                <a href="#"></a><img src="imgs/banner2.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="imgs/banner3.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="imgs/banner4.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="imgs/banner5.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="imgs/banner2.jpg"></a>
            </li>
            <li>
                <a href=""><img src="./imgs/促销活动用图/zypp-zyjjmj-0801.jpg" alt=""></a>
            </li>
            </ul>
            <!--数字控制器-->
            <ul class="controls">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
        <!--轮播结束-->
        </div>

    <!-- 服装共同区域 -->
    <div class="clothing clearfix warpper">
        <h3 class="fl">服装
            <div class="fr clearfix">
                <span>女装内衣</span>
                <span>热销男装</span>
                <span>精品鞋靴</span>
            </div>
        </h3>
        <div class="clearfix fl">
            <div class="fl">
                <img src="./imgs/index7_17.jpg" alt="">
                <table>
                    <tr>
                        <td>中小学教辅</td>
                        <td>外语</td>
                        <td>考试</td>
                    </tr>
                    <tr>
                        <td>小说</td>
                        <td>文学</td>
                        <td>青春文学</td>
                    </tr>
                    <tr>
                        <td>成功\励志</td>
                        <td>管理</td>
                        <td>历史</td>
                    </tr>
                    <tr>
                        <td>哲学\宗教</td>
                        <td>亲子\家教</td>
                        <td>全部分类></td>
                    </tr>
                </table>
            </div>
            <!-- 中间部分 -->
            <div class="clothing_mid fl">
                <div><img src="./imgs/index10_05.jpg" alt=""></div>
                <div><img src="./imgs/index11_08.jpg" alt=""></div>
            </div>
            <!-- 右边 -->
            <ul class="fl clearfix">
                <li>
                    <img src="./imgs/index100_05.jpg" alt="">
                    <div><img src="./imgs/index100_11.jpg" alt=""></div>
                </li>
                <li>
                    <img src="./imgs/index100_05.jpg" alt="">
                    <div><img src="./imgs/index100_11.jpg" alt=""></div>
                </li>
                <li>
                    <img src="./imgs/index100_05.jpg" alt="">
                    <div><img src="./imgs/index100_11.jpg" alt=""></div>
                </li>
            </ul>
        </div>
        <ul class="clothing_btm fl clearfix">
            <li><img src="./imgs/index15_13.jpg" alt=""></li>
            <li><img src="./imgs/index15_14.jpg" alt=""></li>
            <li><img src="./imgs/logo13_11.jpg" alt=""></li>
            <li><img src="./imgs/logo13_12.jpg" alt=""></li>
            <li><img src="./imgs/logo13_13.jpg" alt=""></li>
            <li><img src="./imgs/logo13_14.jpg" alt=""></li>
            <li><img src="./imgs/logo13_15.jpg" alt=""></li>
            <li><img src="./imgs/logo13_16.jpg" alt=""></li>
            <li><img src="./imgs/logo13_17.jpg" alt=""></li>
        </ul>
    </div>
    <!-- 服装共同区域 -->
    
    <!-- 页脚区域开始 -->
    <div class="footer">
        <div class="footer_top">
            <ul class="warpper clearfix">
                <li>
                    <img src="./imgs/222_11.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_13.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_15.png" alt="">
                </li>
                <li>
                    <img src="./imgs/222_17.png" alt="">
                </li>
            </ul>
        </div>
        <div class="footer_mid warpper clearfix">
            <ul class="ul1">
                <li>购物指南</li>
                <li>购物流程</li>
                <li>发票制度</li>
                <li>账户管理</li>
                <li>会员优惠</li>
            </ul>
            <ul>
                <li>支付方式</li>
                <li>货到付款</li>
                <li>网上支付</li>
                <li>礼品卡支付</li>
                <li>银行转帐</li>
            </ul>
            <ul>
                <li>订单服务</li>
                <li>订单配送查询</li>
                <li>订单状态说明</li>
                <li>自助取消订单</li>
                <li>自助修改订单</li>
            </ul>
            <ul>
                <li>退换货</li>
                <li>退换货政策</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
                <li>退款方式和时间</li>
            </ul>
            <ul>
                <li>商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
                <li>加入尾品汇</li>
            </ul>
            <img src="./imgs/logo_00.png" alt="">
        </div>
        <div class="footer_bom warpper">
            <p>
                公司简介 &emsp; | &emsp; Investor Relations  &emsp;| &emsp; 网站联盟  &emsp;|&emsp;  乐购招商  &emsp;|&emsp;  机构销售  &emsp;|&emsp;  手机乐购  &emsp;|&emsp;  官方Blog   &emsp;|&emsp;  热词搜索
            </p>
            <p>
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </p>
        </div>
    </div>
    <!-- 页脚区域结束 -->

    <!-- 海报轮播图 -->
    <script src="./lib/slider.js"></script>
    <script type="text/javascript">
        //主轮播图
        $("#bannerInner").tyslide({
          boxh: 470,//盒子的高度
          w: 1000,//盒子的宽度
          h: 440,//图片的高度
          isShow: true,//是否显示控制器
          isShowBtn: true,//是否显示左右按钮
          controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
          controlsW: 20,//控制按钮宽度
          controlsH: 20,//控制按钮高度
          radius: 10,//控制按钮圆角度数
          controlsColor: "#d7d7d7",//普通控制按钮的颜色
          controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
          isShowNum: true //是否显示数字
        });
      </script>
</body>
</html>